<!-- src/components/AppHeader.vue -->
<template>
  <div class="app-header">
    <!-- 网站 logo 或标题，根据设备类型显示不同内容 -->
    <div class="logo">
      <span v-if="!isMobile" class="rainbow-text">JevonTech Front Community</span>
      <span v-else class="rainbow-text">JTFC</span>
    </div>

    <!-- 导航菜单 -->
    <div class="nav-menu">
      <!-- 桌面端导航 -->
      <template v-if="!isMobile">
        <!-- 未登录状态 -->
        <template v-if="!isLoggedIn">
          <el-button type="primary" @click="showLoginModal">登录</el-button>
          <el-button @click="showRegisterModal">注册</el-button>
        </template>
        <!-- 已登录状态 -->
        <template v-else>
          <el-button type="primary" @click="showPublishModal" class="publish-article-button">发布文章</el-button>
          <el-button type="success" @click="showChatModal" class="customer-service-button">客服</el-button>
          <el-dropdown>
            <span class="el-dropdown-link">
              <el-avatar :size="32" :icon="User"></el-avatar>
              {{ userName }}
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </template>
      </template>

      <!-- 移动端菜单 -->
      <template v-else>
        <!-- 未登录状态显示菜单按钮 -->
        <el-button v-if="!isLoggedIn" type="primary" :icon="Menu" @click="toggleMobileMenu" />
        <!-- 已登录状态显示用户头像和菜单按钮 -->
        <template v-else>
          <div @click="toggleMobileMenu" class="mobile-userinfo">
            <el-avatar :size="32" :icon="User" class="mobile-avatar"></el-avatar>
            {{ userName }}
          </div>
        </template>
      </template>
    </div>

    <!-- 移动端菜单抽屉 -->
    <el-drawer v-model="isMobileMenuOpen" title="菜单" direction="rtl" size="70%">
      <el-menu>
        <el-menu-item v-if="!isLoggedIn" @click="showLoginModal">登录</el-menu-item>
        <el-menu-item v-if="!isLoggedIn" @click="showRegisterModal">注册</el-menu-item>
        <el-menu-item v-if="isLoggedIn" @click="showPublishModal">发布文章</el-menu-item>
        <el-menu-item v-if="isLoggedIn" @click="showChatModal">客服</el-menu-item>
        <el-menu-item v-if="isLoggedIn" @click="logout">退出登录</el-menu-item>
      </el-menu>
    </el-drawer>

    <!-- 登录和注册模态框 -->
    <LoginModal :visible="isLoginModalOpen" @close="closeLoginModal" @login-success="handleLoginSuccess" />
    <RegisterModal :visible="isRegisterModalOpen" @close="closeRegisterModal" />

    <!-- 发布文章模态框 -->
    <PublishArticleModal :visible="isPublishModalOpen" @close="closePublishModal" @publish-success="handlePublishSuccess" />

    <!-- 客服聊天模态框 -->
    <el-dialog
      v-model="isChatModalOpen"
      title="客服聊天"
      :width="isMobile ? '90%' : '30%'"
      :fullscreen="isMobile"
      :before-close="closeChatModal"
    >
      <Chat />
    </el-dialog>
  </div>
</template>

<script setup>
// 导入所需的库和组件
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { Menu, User } from '@element-plus/icons-vue'
import { useUserStore } from '@/stores/user'
import LoginModal from '@/components/LoginModal.vue'
import RegisterModal from '@/components/RegisterModal.vue'
import PublishArticleModal from '@/components/PublishArticleModal.vue'
import Chat from '@/components/Chat.vue'
import { ElMessage } from 'element-plus'

// 使用用户store
const userStore = useUserStore()

// 响应式状态
const isMobile = ref(false) // 是否为移动设备
const isMobileMenuOpen = ref(false) // 移动端菜单是否打开
const isLoginModalOpen = ref(false) // 登录模态框是否打开
const isRegisterModalOpen = ref(false) // 注册模态框是否打开
const isPublishModalOpen = ref(false) // 发布文章模态框是否打开
const isChatModalOpen = ref(false) // 客服聊天模态框是否打开

// 计算属性
const isLoggedIn = computed(() => userStore.isLoggedIn) // 是否已登录
const userName = computed(() => userStore.userName) // 用户名

// 检查是否为移动设备
const checkMobile = () => {
  isMobile.value = window.innerWidth <= 768
}

// 生命周期钩子
onMounted(() => {
  checkMobile() // 初始检查
  window.addEventListener('resize', checkMobile) // 添加窗口大小变化监听
})

onUnmounted(() => {
  window.removeEventListener('resize', checkMobile) // 移除窗口大小变化监听
})

// 切换移动端菜单
const toggleMobileMenu = () => {
  isMobileMenuOpen.value = !isMobileMenuOpen.value
}

// 显示登录模态框
const showLoginModal = () => {
  isLoginModalOpen.value = true
  isMobileMenuOpen.value = false // 关闭移动端菜单
}

// 关闭登录模态框
const closeLoginModal = () => {
  isLoginModalOpen.value = false
}

// 显示注册模态框
const showRegisterModal = () => {
  isRegisterModalOpen.value = true
  isMobileMenuOpen.value = false // 关闭移动端菜单
}

// 关闭注册模态框
const closeRegisterModal = () => {
  isRegisterModalOpen.value = false
}

// 显示发布文章模态框
const showPublishModal = () => {
  isPublishModalOpen.value = true
  isMobileMenuOpen.value = false // 关闭移动端菜单
}

// 关闭发布文章模态框
const closePublishModal = () => {
  isPublishModalOpen.value = false
}

// 显示客服聊天模态框
const showChatModal = () => {
  isChatModalOpen.value = true
  isMobileMenuOpen.value = false // 关闭移动端菜单
}

// 关闭客服聊天模态框
const closeChatModal = () => {
  isChatModalOpen.value = false
}

// 处理登录成功
const handleLoginSuccess = async () => {
  closeLoginModal()
  await userStore.fetchUserInfo() // 获取最新的用户信息
}

// 处理文章发布成功
const handlePublishSuccess = () => {
  closePublishModal()
  ElMessage.success('文章发布成功')
  // 可以在这里添加其他逻辑，比如刷新文章列表等
}

// 退出登录
const logout = () => {
  userStore.logout()
  ElMessage.success('已退出登录')
  isMobileMenuOpen.value = false // 关闭移动端菜单
}
</script>

<style scoped>
/* 头部容器样式 */
.app-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  padding: 0 20px;
}

/* Logo 样式 */
.logo {
  font-size: 1.8em;
  font-weight: bold;
}

/* 炫彩文字效果 */
.rainbow-text {
  background-image: linear-gradient(to right, violet, indigo, blue, green, yellow, orange, red);
  -webkit-background-clip: text;
  color: transparent;
  animation: rainbow-animation 5s linear infinite;
  background-size: 200% 100%;
}

@keyframes rainbow-animation {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

/* 导航菜单样式 */
.nav-menu {
  display: flex;
  align-items: center;
}

/* 下拉菜单链接样式 */
.el-dropdown-link {
  display: flex;
  align-items: center;
  cursor: pointer;
}

/* 下拉菜单中头像样式 */
.el-dropdown-link .el-avatar {
  margin-right: 8px;
}

/* 发布文章按钮样式 */
.publish-article-button {
  margin-right: 10px;
}

/* 客服按钮样式 */
.customer-service-button {
  margin-right: 10px;
}

/* 移动端样式 */
@media (max-width: 768px) {
  .nav-menu {
    justify-content: flex-end;
  }
  
  .logo {
    font-size: 1.2em; /* 移动端稍微减小字体大小 */
  }

  .mobile-userinfo {
    display: flex;
    align-items: center;
  }

  .mobile-avatar {
    margin-right: 10px;
  }

  .customer-service-button {
    margin-right: 5px;
  }
}
</style>